<template>
  <node
    :title="config.name"
    :show-error="showError"
    :content="content"
    :error-info="errorInfo"
    @selected="selected"
    @delNode="delNode"
    @insertNode="insertNode"
    placeholder="请设置延时时间"
    header-bgc="#f95166"
    header-icon="ele-Clock"
  />
</template>

<script>
import { computed, reactive, toRefs } from 'vue'
import Node from './Node.vue'

export default {
    name: 'DelayNode',
    props: {
        config: {
        type: Object,
        default: () => {
            return {}
        },
        },
    },
    components: { Node },
    emits: ['selected', 'delNode', 'insertNode'],
    setup(props, context) {
        const { config } = toRefs(props)
        const state = reactive({
            showError: false,
            errorInfo: '',
        })
        const selected = () => {
            context.emit('selected')
        }
        const delNode = () => {
            context.emit('delNode')
        }
        const insertNode = (type) => {
            context.emit('insertNode', type)
        }
        const content = computed(() => {
            if (config.value.props.type === 'FIXED') {
                return `等待 ${config.value.props.time} ${getName(
                config.value.props.unit
                )}`
            } else if (config.value.props.type === 'AUTO') {
                return `至当天 ${config.value.props.dateTime}`
            } else {
                return null
            }
        })
        const validate = (err) => {
            state.showError = false
            try {
                if (config.value.props.type === 'AUTO') {
                if ((config.value.props.dateTime || '') === '') {
                    state.showError = true
                    state.errorInfo = '请选择时间点'
                }
                } else {
                if (config.value.props.time <= 0) {
                    state.showError = true
                    state.errorInfo = '请设置延时时长'
                }
                }
            } catch (e) {
                state.showError = true
                state.errorInfo = '配置出现问题'
            }
            if (state.showError) {
                err.push(`${config.value.name} 未设置延时规则`)
            }
            return !state.showError
        }
        const getName = (unit) => {
            switch (unit) {
                case 'D':
                    return '天'
                case 'H':
                    return '小时'
                case 'M':
                    return '分钟'
                default:
                    return '未知'
            }
        }
        return {
            ...toRefs(state),
            selected,
            delNode,
            insertNode,
            content,
            validate,
            getName
        }
    }
}
</script>

<style>

</style>